import React, { useEffect, useState } from "react";
import { Input, Button, Flex, Table, Space } from 'antd';
import { SearchOutlined, PlusCircleOutlined } from '@ant-design/icons';

const User = () => {
    const dataSource = [
        {
          key: '1',
          name: '胡彦斌',
          age: 32,
          address: '西湖区湖底公园1号',
        },
        {
          key: '2',
          name: '胡彦祖',
          age: 42,
          address: '西湖区湖底公园1号',
        }
      ];
      const columns = [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '住址',
          dataIndex: 'address',
          key: 'address',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
              <Space size="middle">
                <a>邀请 {record.name}</a>
                <a>删除</a>
              </Space>
            ),
          }
      ];
    for(let i = 0; i < 100; i++) {
        dataSource.push({
            key: 3 + i,
            name: '胡彦祖' + i,
            age: 18 + i,
            address: `西湖区湖底公园${i + 1}号`,
        })
    }
    const [selectionType, setSelectionType] = useState('checkbox');
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
          disabled: record.name === '胡彦斌',
          // Column configuration not to be checked
          name: record.name,
        }),
      };
    return (
        <div>
            <Flex justify="space-between" align='center'>
                <Button type="primary" icon={<PlusCircleOutlined />}>新增</Button>
                <Flex gap="middle" justify="space-between" align='center'>
                    <Input placeholder="请输入搜索内容" />
                    <Button type="primary" icon={<SearchOutlined />}>搜索</Button>
                </Flex>
            </Flex>
            <Table
                dataSource={dataSource}
                columns={columns}
                scroll={{
                    y: 600,
                }}
                rowSelection={{
                    type: selectionType,
                    ...rowSelection
                }}
            />
        </div>
    )
}

export default User